<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand" routerLink="/">WebOJ</a>
    <button class="navbar-toggler" type="button" (click)="isCollapsed = !isCollapsed" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" [ngbCollapse]="isCollapsed">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" routerLink="/problems" routerLinkActive="active">题库</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/contests" routerLinkActive="active">竞赛</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/ranking" routerLinkActive="active">排名</a>
        </li>
        <!-- 管理员入口 -->
        <li class="nav-item" *ngIf="currentUser && currentUser.role === 'admin'">
          <a class="nav-link admin-link" routerLink="/admin" routerLinkActive="active">
            <i class="fas fa-cog"></i> 管理员
          </a>
        </li>
      </ul>

      <ul class="navbar-nav ms-auto" *ngIf="!currentUser; else userMenu">
        <li class="nav-item">
          <a class="nav-link" routerLink="/users/login">登录</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/users/register">注册</a>
        </li>
      </ul>

      <ng-template #userMenu>
        <ul class="navbar-nav ms-auto">
          <li class="nav-item dropdown" ngbDropdown>
            <a class="nav-link dropdown-toggle" ngbDropdownToggle>
              {{ currentUser.username }}
              <span *ngIf="currentUser.role === 'admin'" class="admin-badge">管理员</span>
            </a>
            <div class="dropdown-menu" ngbDropdownMenu>
              <a class="dropdown-item" routerLink="/users/profile">个人中心</a>
              <a class="dropdown-item" routerLink="/users/submissions">我的提交</a>
              <!-- 管理员菜单项 -->
              <div *ngIf="currentUser.role === 'admin'">
                <div class="dropdown-divider"></div>
                <h6 class="dropdown-header">管理员功能</h6>
                <a class="dropdown-item" routerLink="/admin">
                  <i class="fas fa-tachometer-alt"></i> 管理控制台
                </a>
                <a class="dropdown-item" routerLink="/admin/problems/create">
                  <i class="fas fa-plus"></i> 创建题目
                </a>
              </div>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" (click)="logout()">退出</a>
            </div>
          </li>
        </ul>
      </ng-template>
    </div>
  </div>
</nav>
